extends ../common/layout.pug

block body
  .m-auth
    include ../common/banner.pug
    .tab
      li(:class='{active: tab === "signin"}', @click='tab = "signin"') 登录
      li(:class='{active: tab === "signup"}', @click='tab = "signup"') 注册

    .forget(v-if='tab === "forget" && !isShowPay')
      form.g-center-block
        .title.g-size4.g-section 找回密码
        label.g-show 请输入您的电子邮箱：
        input.g-show
        .btn-wrap
          button.btn.is-primary 提交

    .signin(v-if='tab === "signin"')
      form.g-center-block
        .row.g-section
          .col-xs-12.label-wrap
            label 邮件
          .col-xs-12
            input
        .row.g-section
          .col-xs-12.label-wrap
            label 密码
          .col-xs-12
            input
        .row.remember
          input(type='checkbox') 
          span 下次自动登录
          span.line |
          span.g-pointer(@click='tab = "forget"') 忘记密码
        .g-text-center.btn-wrap
          button.btn 登录
      .others.g-text-center.g-center-block
        .title 
          h5 使用其他网站账号登录
        .row
          .col-xs-4
            img(src='../images/auth/qq.png')
            h6 QQ帐号
          .col-xs-4
            img(src='../images/auth/wb.png')
            h6 新浪微博
          .col-xs-4
            img(src='../images/common/wechat.png')
            h6 微信
    
    .signup(v-if='tab === "signup" && !isShowPay')
      .agreement-wrap(v-if='!isReadedAgreement')
        include ../common/agreement.pug
        .btn-wrap.g-text-center
          button.btn(@click='isReadedAgreement = true') 同意
      .signup-form(v-if='isReadedAgreement')
        form
          .form-item
            label
              span.g-color-red *
              span 电子邮件
            input(@blur='onBlurEmail', v-model='email')
            .alert(v-show='alert.isEmailAlert') 请填写正确的电子邮箱
          .form-item
            label 
              span.g-color-red *
              span 密码
            input(@blur='onBlurPw', v-model='pw')
            .alert(v-show='alert.isPwAlert') 请使用字母数字，且不少于6个字符
          .form-item
            label 
              span.g-color-red *
              span 确认密码
            input(@blur='onBlurRePw', v-model='rePw')
            .alert(v-show='alert.isRePwAlert') 2次密码不相同
          .form-item
            label 
              span.g-color-red *
              span  名称
            input(@blur='onBlurName', v-model='name')
            .alert(v-show='alert.isNameAlert') 名称不能为空
          .form-item
            label 电话
            input
          .form-item
            label 通讯地址
            input
          .form-item
            label 送货地址
            input
          .form-item.sex
            label 性别
            select.w-50
              option(value='') 请选择
              option(value='男') 男
              option(value='女') 女
          .form-item
            label 出生地时区
            select.w-50
              option(value='') 请选择
          .form-item
            label 出生日期
            select.w-25
              option(value='') 年份
              option(value='item', v-for='item in bornYears') {{item}}年
            select.w-25
              option(value='') 月份
              option(value='item', v-for='item in bornMonths') {{item}}月
            select.w-25
              option(value='') 日期
              option(value='item', v-for='item in bornDays') {{item}}
            select.w-25
              option(value='') 时间
            .born-tip
              h6 敬请留意！由于紫微命盘会依据填写的出生日期和时间计算，因此敬请如实填写性别，出生地区及出生日期，方可显示命盘。
              h6 注意：出生日期只可更改一次，而出生时间可以任意更改。
          .form-item
            label 介绍会员邮箱
            input
            .born-tip
              h6 将送出一个点数给介绍会员作为奖励
          .form-item.radio-wrap
            div.radio-item.g-section-sm
              input(type="radio", v-model='fee', value='feeA') 
              span.g-color-red RMB¥600
              span ＝一年会籍注册费＋
              span.g-color-red 12.00
              span 个消费点数
            div.radio-item.g-section-sm
              input(type="radio", v-model='fee', value='feeB') 
              span.g-color-red RMB¥200
              span ＝一年会籍注册费
            div.radio-item
              a.g-color-active(href="/") 关于收费及点数使用
          .form-item.captcha-wrap
            label 
              span.g-color-red *
              span 请输入验证码
            .input-wrap
              img(src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509034805438&di=bc20011235f877398b7ae4fdecaa24d7&imgtype=0&src=http%3A%2F%2Freso2.yiihuu.com%2F1331436-z.jpg", alt="")
              input(v-model='captcha', @blur='onBlurCaptcha')
            .alert(v-show='alert.isCaptchaAlert') 验证码不能为空
          .btn-wrap.g-text-center
            button(type='button', @click='onTapBuy') 购买

    .pay(v-show='isShowPay && tab === "signup"')
      .g-text-center.g-section
        h3 会员信息
      .info.g-border-b
        .row
          .col-xs-5 电子邮箱
          .col-xs-7 404498949@qq.com
        .row
          .col-xs-5 密码
          .col-xs-7 ******
        .row
          .col-xs-5 确定密码
          .col-xs-7 ******
        .row
          .col-xs-5 名称
          .col-xs-7 admin
        .row
          .col-xs-5 电话
          .col-xs-7 13333333333
        .row
          .col-xs-5 通信地址
          .col-xs-7 广东深圳市区
        .row
          .col-xs-5 送货地址
          .col-xs-7 广东深圳市区
        .row
          .col-xs-5 性别
          .col-xs-7 男
        .row
          .col-xs-5 出生地时区
          .col-xs-7 中国
        .row
          .col-xs-5 出生日期
          .col-xs-7 2018年8月8日（子）
        .row
          .col-xs-5 介绍会员邮箱
          .col-xs-7 404498949@qq.com
      .g-border-b.g-padding
        .row
          .col-sm-8 一年会籍注册费 + 12.00个消费点数
          .col-sm-4.g-text-right
            span 价格：
            span.g-color-red RMB¥600
      .g-border-b.g-text-right.result.g-padding
        h3
          span 结算：
          span.g-color-red RMB¥600
      .pay-type
        .line 请选择支付方式：
        .line
          input(type="radio", v-model='payType', value='union') 
          img(src="../images/auth/pay-type.png", alt="")
        .line
          input(type="radio", v-model='payType', value='alipay') 
          img(src="../images/auth/alipay.png", alt="")
      .row.submit-wrap
        .col-xs-6.g-text-right
          button.btn.is-default(@click="isShowPay = false") 修改会员信息
        .col-xs-6
          button.btn.is-primary 支付
          
block script
  include ../common/script.pug
  script(src="../js/query.js", type="text/javascript")
  script(src="../js/auth.js", type="text/javascript")